<template>
  <view class="online-answer bg-white px-2 pt-2.5 box-border min-h-[100vh]">
    <view
      class="part-box px-3.5 py-3 box-border question-item text-black min-h-[694rpx]"
    >
      <view class="flex flex-row items-center">
        <view class="bg-[#038AFE] w-[7rpx] h-[28rpx]"></view>
        <view class="text-[31rpx] ml-2">{{
          topicInfo.type == 0 ? "单选" : topicInfo.type == 1 ? "多选" : ""
        }}</view>
      </view>
      <view class="text-[25rpx] topic mt-3 mb-8">{{
        topicInfo.topicContent
      }}</view>
      <view
        :class="
          selectedOptions.indexOf(op.option) > -1
            ? 'active flex flex-row items-center text-[26rpx] px-3 py-2 box-border mb-2.5 options-item'
            : 'unactive flex flex-row items-center text-[26rpx] px-3 py-2 box-border mb-2.5 options-item'
        "
        v-for="(op, opIndex) in topicInfo.optionContent"
        :key="opIndex"
        @click="
          topicInfo.type == 0
            ? (selectedOptions = [op.option])
            : changeSelectOptions(op.option)
        "
      >
        <view class="mr-4">{{ op.option }}</view>
        <text>{{ op.optionCount }}</text>
      </view>
    </view>
    <view class="btm-btn" style="width: calc(100% - 64rpx)" @click="onsubmit">
      <button class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx]">
        提 交
      </button>
    </view>
    <view class="success-tip">
      <up-toast ref="successToastRef"></up-toast>
    </view>
    <view class="error-tip">
      <up-toast ref="errorToastRef"></up-toast>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import { extractQuestion } from "@/api/police/answer";

const uToastRef = <any>ref(null);
const topicInfo = <any>ref({});
const selectedOptions = <any>ref([]);
const successToastRef = ref();
const errorToastRef = ref();

// 获取随机题目
const getTopicInfo = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  extractQuestion()
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      if (data.optionContent) {
        data.optionContent = JSON.parse(data.optionContent);
      } else {
        data.optionContent = [];
      }
      topicInfo.value = data;
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 选择答案
const changeSelectOptions = (op: any) => {
  if (selectedOptions.value.length) {
    if (selectedOptions.value.indexOf(op) > -1) {
      selectedOptions.value.splice(selectedOptions.value.indexOf(op), 1);
    } else {
      selectedOptions.value.push(op);
    }
  } else {
    selectedOptions.value.push(op);
  }
  // 按照正序排序
  selectedOptions.value.sort((a: any, b: any) =>
    a.localeCompare(b, "en", { sensitivity: "base" })
  );
};
// 提交答案
const onsubmit = () => {
  let selectAnswer = selectedOptions.value.join("");
  if (selectAnswer) {
    if (selectAnswer === topicInfo.value.correctAnswer) {
      successToastRef.value.show({
        type: "success",
        message: "回答正确",
        position: "bottom",
        icon: "checkmark-circle-fill",
        complete() {
          uni.redirectTo({
            url: "/pages/police/home/index",
          });
        },
      });
    } else {
      errorToastRef.value.show({
        type: "error",
        message: `回答错误，正确答案应选：${topicInfo.value.correctAnswer}，请重新答题并提交。`,
        position: "center",
        icon: "close-circle-fill",
        complete() {
          selectedOptions.value = [];
          // topicInfo.value = {};
          // getTopicInfo();
        },
      });
    }
  } else {
    uToastRef.value.show({
      type: "warning",
      message: "请选择选项",
    });
  }
};

onLoad(() => {
  getTopicInfo();
});
</script>

<style lang="scss" scoped>
.online-answer {
  .question-item {
    max-height: calc(100vh - 83rpx - 64rpx - 50rpx);
    overflow: auto;
    .topic {
      line-height: 42rpx;
    }
    .options-item:last-child {
      margin-bottom: 86rpx;
    }
    .active {
      border: 0.7rpx solid #038afe;
      background: #e5f3ff;
    }
    .unactive {
      border: 0.7rpx solid #bbbbbb;
      background: #fff;
    }
  }

  .success-tip {
    ::v-deep .u-type-success {
      border: 0.7rpx solid #707070 !important;
    }
    ::v-deep .u-toast__content {
      background-color: #ffffff !important;
      padding: 24rpx !important;
      box-sizing: border-box;
    }
    ::v-deep .u-toast__content__text--success {
      color: #000000 !important;
      font-size: 26rpx !important;
    }
  }

  .error-tip {
    ::v-deep .u-type-error {
      color: #e84335;
      background: #ffffff;
      border-radius: 160rpx;
      border: 0.7rpx solid #e84335;
    }
    ::v-deep .u-toast__content {
      width: calc(100vw - 60rpx) !important;
      max-width: 100% !important;
      padding: 20rpx;
      box-sizing: border-box;
    }
    ::v-deep .u-toast__content__text--error {
      width: calc(100vw - 60rpx - 40rpx) !important;
      max-width: 100% !important;
      color: #e84335 !important;
      font-size: 26rpx !important;
    }
  }
}
</style>
